<template>
  <div class="swipe">
    <van-swipe @change="onChange">
      <van-swipe-item v-for="pic in swipeList" :key="pic.id">
        <div class="img-box">
          <van-image :src="pic.pic" alt />
          <p class="img-page">{{ current + 1 }}/{{picLength}}</p>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0
    };
  },
  props: {
    swipeList: {
      type: Array,
      required: true
    },
    picLength:{
      type:Number,
      required: true
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    }
  }
};
</script>

<style lang="less" scoped>
.swipe {
  width: 100%;
  height: 310px;
  text-align: center;
  .van-swipe {
    .van-swipe__track {
      height: 310px;
      .van-swipe-item {
        width: 100%;
        height: 310px;
        .img-box {
          margin: 0 auto;
          width: 306px;
          height: 306px;
          .img-page {
            font-size: 12px;
            line-height: 20px;
            padding: 0 10px;
            color: #fff;
            position: absolute;
            right: 10px;
            bottom: 12px;
            background: #000;
            opacity: 0.2;
            border-radius: 10px;
          }
          img {
            width: 100%;
          }
        }
      }
    }
    /deep/.van-swipe__indicator {
      background: #fff !important;
      opacity: 0.8 !important;
      border: 1px solid #ddd !important;
    }
    /deep/.van-swipe__indicator--active{
      background: #1fdb9b !important;
    }
  }
}
</style>
